<template>
  <div class="status-wrap">
    <div
      v-for="status in statusData"
      :key="status[defaultProps.key]"
      :class="{ 'is-active': currentStatus === status[defaultProps.key], 'status-item': true }"
      @click="changeStatus(status[defaultProps.key])"
    >
      <el-badge
        :value="status[defaultProps.num]"
        :max="99"
        :hidden="status[defaultProps.num] === 0"
      >
        <span class="status-label">{{ status[defaultProps.value] }}</span>
      </el-badge>
      <!-- <span>{{ status[defaultProps.value] }}</span> -->
      <!-- <span v-if="status[defaultProps.num] > 0" class="status--num">{{ status[defaultProps.num] }}</span> -->
    </div>
    <div
      v-if="allDef"
      :class="{ 'is-active': currentStatus === '' }"
      class="status-item"
      @click="changeStatus('')"
    >
      <el-badge>
        <span class="status-label">全部</span>
      </el-badge>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, PropType } from 'vue'

import IBaseObj from '#/index'

const props = defineProps({
  statusData: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  statusCode: {
    type: [String, Number, Object],
    default: '',
  },
  defaultProps: {
    type: Object,
    default: () => {
      return {
        key: 'code',
        value: 'value',
        num: 'countStatus',
      }
    },
  },
  allDef: {
    type: Boolean,
    default: true,
  },
})

const emits = defineEmits(['update:status-code', 'search'])

const currentStatus = computed({
  get() {
    return props.statusCode
  },
  set(val) {
    emits('update:status-code', val)
  },
})
const changeStatus = (code: string | number) => {
  currentStatus.value = code
  emits('search')
}
</script>

<style lang="scss" scoped>
.status-wrap {
  display: flex;
  font-weight: 600;
  line-height: 40px;
  align-items: center;
}

.status-item {
  margin-right: 10px;
  // padding: 0 13px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  // transition: all 0.2s ease;

  // &:hover {
  //   color: var(--color-primary);
  // }

  // &.is-active {
  //   color: var(--color-primary);
  //   border-color: var(--color-primary);
  // }

  &:hover {
    .status-label {
      color: var(--color-primary);
      // border-color: var(--el-color-primary-light-7);
      // background: var(--el-color-primary-light-9);
      opacity: 0.88;
    }
  }

  &.is-active {
    border-color: var(--color-primary);

    .status-label {
      color: var(--color-primary);
      // border-color: var(--el-color-primary-light-7);
      // background: var(--el-color-primary-light-9);
    }
  }

  .status-label {
    display: inline-block;
    padding: 7px 15px;
    line-height: 1;
    // border: 1px solid #dcdfe6;
    // border-radius: calc(var(--el-border-radius-base) - 1px);
  }
}

.status--num {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  background: #c8e4ff;
  border-radius: 6px;
}
</style>
